<!--
/**
 * This file is part of the smilText parser implemented in JavaScript,
 *
 * Copyright (C) 2003-2009 Stichting CWI, 
 * Science Park 123, 1098 XG Amsterdam, The Netherlands.
 *
 * smilText parser in JavaScript is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * smilText parser in JavaScript is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with smilText parser in JavaScript; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */

/**
 @version 1.0
 @author <a href="mailto:rlaiola@cwi.nl">Rodrigo Laiola Guimaraes</a>
*/
-->

<HTML>
<HEAD>
<script type="text/javascript" src="../src/scripts/jsoner.commons.js"></script>
<script type="text/javascript" src="../src/scripts/com.iskitz.ajile.1.2.1.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.adt.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.util.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.smilText.Time.js"></script>
<script type="text/javascript" src="../src/scripts/cwi.smilText.js"></script>
</HEAD>
<BODY>

<table>
<tr>
<td valign="top" width="33%">

<H2>smilText Examples: BasicText Module</H2>

<!-- smilText tag inside the html file -->
<H3>Example 1: Hello World!</H3>
<DIV id="region1">
<smilText>
	Hello world!
</smilText>
</DIV>
<A HREF="javascript:docs[0].play()">Play</A>
<A HREF="javascript:docs[0].pause()">Pause</A>
<A HREF="javascript:docs[0].stop()">Stop</A>
<br/>
<A HREF="examples/example1.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 2: Example 1 with duration = 10s</H3>
<DIV id="region2">
<smilText dur="10s">
	Hello world!
</smilText>
</DIV>
<A HREF="javascript:docs[1].play()">Play</A>
<A HREF="javascript:docs[1].pause()">Pause</A>
<A HREF="javascript:docs[1].stop()">Stop</A>
<br/>
<A HREF="examples/example2.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 3: Example 2 with a line break</H3>
<DIV id="region3">
<smilText dur="10s">
	Hello<br/>world!
</smilText>
</DIV>
<A HREF="javascript:docs[2].play()">Play</A>
<A HREF="javascript:docs[2].pause()">Pause</A>
<A HREF="javascript:docs[2].stop()">Stop</A>
<br/>
<A HREF="examples/example3.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 4: Example 3 with TEV and CLEAR tags</H3>
<DIV id="region4">
<smilText dur="6s">
	Hello<br/>world!
	<tev next="2s"></tev>
	How are you today?
	<clear begin="4s"></clear>
	I gotta go now!
</smilText>
</DIV>
<A HREF="javascript:docs[3].play()">Play</A>
<A HREF="javascript:docs[3].pause()">Pause</A>
<A HREF="javascript:docs[3].stop()">Stop</A>
<br/>
<A HREF="examples/example4.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 5: Example 4 without explicit duration</H3>
<DIV id="region5">
<smilText>
	Hello<br/>world!
	<tev next="2s"></tev>
	How are you today?
	<clear begin="4s"></clear>
	I gotta go now!
</smilText>
</DIV>
<A HREF="javascript:docs[4].play()">Play</A>
<A HREF="javascript:docs[4].pause()">Pause</A>
<A HREF="javascript:docs[4].stop()">Stop</A>
<br/>
<A HREF="examples/example5.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 6: Example 5 with explicit duration = 3s</H3>
<DIV id="region6">
<smilText dur="3s">
	Hello<br/>world!
	<tev next="2s"></tev>
	How are you today?
	<clear begin="4s"></clear>
	I gotta go now!
</smilText>
</DIV>
<A HREF="javascript:docs[5].play()">Play</A>
<A HREF="javascript:docs[5].pause()">Pause</A>
<A HREF="javascript:docs[5].stop()">Stop</A>
<br/>
<A HREF="examples/example6.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 7: smilText tag inside the html file</H3>
<DIV id="region7">
	<smilText id="text1" dur="5s" textWrapOption="wrap">
	Hallo!
	<clear begin="3s"></clear>
	Hoe gaat het?
	<tev next="2s"></tev>
	Doei!
	</smiltext>
</DIV>
<A HREF="javascript:docs[6].play()">Play</A>
<A HREF="javascript:docs[6].pause()">Pause</A>
<A HREF="javascript:docs[6].stop()">Stop</A>
<br/>
<A HREF="examples/example7.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 8: Example 7 with textWrapOption = wrap</H3>
<DIV id="region8" STYLE="background-color:yellow;width:50;height:50">
	<smilText id="test2" dur="5s" textWrapOption="wrap">
	Hallo!
	<clear begin="3s"></clear>
	Hoe gaat het?
	<tev next="2s"></tev>
	Doei!
	</smiltext>
</DIV>
<A HREF="javascript:docs[7].play()">Play</A>
<A HREF="javascript:docs[7].pause()">Pause</A>
<A HREF="javascript:docs[7].stop()">Stop</A>
<br/>
<A HREF="examples/example8.xml">view smilText code</A>

</td>
<td valign="top" width="33%">

<H2>smilText Examples: TextStyling Module</H2>

<!-- smilText tag inside the html file -->
<H3>Example 9: Hello World in DIV, P and SPAN elements</H3>
<DIV id="region9">
<smilText>
	Hello world 1!
	<div>
		Hello world 2!
		<p>Hello world 5!</p>
		Hello world 3!
		<div>
			<p>Hello world 7!</p>
			Hello world 4!
		</div>
		<p>Hello world 6!</p>
		<div>
			Hello world 10!
			<span>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[8].play()">Play</A>
<A HREF="javascript:docs[8].pause()">Pause</A>
<A HREF="javascript:docs[8].stop()">Stop</A>
<br/>
<A HREF="examples/example9.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 10: Example 9 with textBackgroundColor attribute</H3>
<DIV id="region10">
<smilText>
	Hello world 1!
	<div textBackgroundColor='green'>
		Hello world 2!
		<p textBackgroundColor='red'>Hello world 5!</p>
		Hello world 3!
		<div textBackgroundColor='blue'>
			<p>Hello world 7!</p>
			Hello world 4!
		</div>
		<p textBackgroundColor='yellow'>Hello world 6!</p>
		<div textBackgroundColor='gray'>
			Hello world 10!
			<span textBackgroundColor='pink'>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[9].play()">Play</A>
<A HREF="javascript:docs[9].pause()">Pause</A>
<A HREF="javascript:docs[9].stop()">Stop</A>
<br/>
<A HREF="examples/example10.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 11: Example 9 with textColor attribute</H3>
<DIV id="region11">
<smilText>
	Hello world 1!
	<div textColor='green'>
		Hello world 2!
		<p textColor='red'>Hello world 5!</p>
		Hello world 3!
		<div textColor='blue'>
			<p>Hello world 7!</p>
			Hello world 4!
		</div>
		<p textColor='yellow'>Hello world 6!</p>
		<div textColor='gray'>
			Hello world 10!
			<span textColor='pink'>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[10].play()">Play</A>
<A HREF="javascript:docs[10].pause()">Pause</A>
<A HREF="javascript:docs[10].stop()">Stop</A>
<br/>
<A HREF="examples/example11.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 12: Example 9 with textStyle and textWeight attributes</H3>
<DIV id="region12">
<smilText>
	Hello world 1!
	<div textFontWeight='bold' textFontStyle='italic'>
		Hello world 2!
		<p textFontStyle='oblique'>Hello world 5!</p>
		Hello world 3!
		<div textFontStyle='normal'>
			<p>Hello world 7!</p>
			Hello world 4!
		</div>
		<p textFontStyle='italic'>Hello world 6!</p>
		<div textFontWeight='normal' textFontStyle='reverseOblique'>
			Hello world 10!
			<span textFontStyle='normal'>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[11].play()">Play</A>
<A HREF="javascript:docs[11].pause()">Pause</A>
<A HREF="javascript:docs[11].stop()">Stop</A>
<br/>
<A HREF="examples/example12.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 13: Example 9 with textFontSize and textFontFamily attributes</H3>
<DIV id="region13">
<smilText>
	Hello world 1!
	<div textFontSize='3.5em'>
		Hello world 2!
		<p textFontFamily='geneva, arial, helvetica, sans-serif' textFontSize='smaller'>Hello world 5!</p>
		Hello world 3!
		<div textFontSize='x-large'>
			<p textFontFamily='courier new'>Hello world 7!</p>
			Hello world 4!
		</div>
		<p>Hello world 6!</p>
		<div textFontSize='small'>
			Hello world 10!
			<span textFontFamily='monospace' textFontSize='xx-small'>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[12].play()">Play</A>
<A HREF="javascript:docs[12].pause()">Pause</A>
<A HREF="javascript:docs[12].stop()">Stop</A>
<br/>
<A HREF="examples/example13.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 14: Example 9 with textWritingMode and textAlign attributes</H3>
<H4 style='color:red'>Note: textWritingMode will be available in CSS3. So far only IE supports 'tb-rl' and 'lr-tb'</H4>
<DIV id="region14">
<smilText textAlign='right'>
	Hello world 1!
	<div textWritingMode='rl' textAlign='inherit'>
		Hello world 2!
		<p textWritingMode='lr'>Hello world 5!</p>
		Hello world 3!
		<div textWritingMode='tb-lr' textAlign='center'>
			<p textWritingMode='tb-rl'>Hello world 7!</p>
			Hello world 4!
		</div>
		<p>Hello world 6!</p>
		<div textFontMode='lr-tb' textAlign='start'>
			Hello world 10!
			<span textWritingMode='rl-tb'>Hello world 8!</span>
			Hello world 9!
		</div>
	</div>
	Hello world 11!
</smilText>
</DIV>
<A HREF="javascript:docs[13].play()">Play</A>
<A HREF="javascript:docs[13].pause()">Pause</A>
<A HREF="javascript:docs[13].stop()">Stop</A>
<br/>
<A HREF="examples/example14.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 15: textDirection attribute</H3>
<DIV id="region15">
<smilText dur="10s">
	<div>
		<span textDirection="ltr">This span has textDirection=ltr.</span>
		<span textDirection="rtl">This span has textDirection=rtl.</span>
		<div>
			<span textDirection="ltro">This span has textDirection=ltro.</span>
		</div>
		<p>
			<span textDirection="rtlo">This span has textDirection=rtlo.</span>
		</p>
	</div>
</smilText>
</DIV>
<A HREF="javascript:docs[14].play()">Play</A>
<A HREF="javascript:docs[14].pause()">Pause</A>
<A HREF="javascript:docs[14].stop()">Stop</A>
<br/>
<A HREF="examples/example15.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 16: textMode = replace</H3>
<DIV id="region16">
<smilText textMode='replace' dur="10s">
	Hello<br/>world!
	<tev next="2s"></tev>
	How are you today?
	<clear begin="5s"></clear>
	I gotta go now!
</smilText>
</DIV>
<A HREF="javascript:docs[15].play()">Play</A>
<A HREF="javascript:docs[15].pause()">Pause</A>
<A HREF="javascript:docs[15].stop()">Stop</A>
<br/>
<A HREF="examples/example16.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 17: textPlace attribute</H3>
<H4 style='color:red'>Note: I still do not know how to do it.</H4>

<!-- smilText tag inside the html file -->
<H3>Example 18: textStyle and textStyling elements (+ some timing to make it fun).</H3>
<DIV id="region18">
	<textStyling>
		<textStyle id='mystyle' textAlign='center' textBackgroundColor='black' textColor='white' textDirection='rtl' textFontFamily='Arial' textFontSize='28' textFontStyle='italic' textFontWeight='bold' textMode='replace' textPlace='center' textWritingMode='lr-tb'/>
		<textStyle id='mystyle2' textBackgroundColor='red'/>
	</textStyling>

	<smilText textStyle='mystyle'>
		Hello world 1!
		<div textAlign='right' textFontStyle='normal' textFontWeight='normal' textBackgroundColor='green'>
			Hello world 1.1!
			<tev begin='2s'></tev>
			Hello world 2!
		</div>
		<p textColor='gray' textFontFamily='monospace' textFontSize='14' textBackgroundColor='blue'>Hello world 3!</p>
		<tev next='2'></tev>
		<p textStyle='mystyle2'>I gotta go</p>
		Bye!
	</smilText>

</DIV>
<A HREF="javascript:docs[16].play()">Play</A>
<A HREF="javascript:docs[16].pause()">Pause</A>
<A HREF="javascript:docs[16].stop()">Stop</A>
<br/>
<A HREF="examples/example18.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 19: Testing xml:space. smilText code inside html.</H3>
<DIV id="region19">
	<smilText xml:space='preserve'>
	
	This text has xml:space=preserve.		As you can       see     
it 				is not well formated
	!
	</smilText>
</DIV>
<A HREF="javascript:docs[17].play()">Play</A>
<A HREF="javascript:docs[17].pause()">Pause</A>
<A HREF="javascript:docs[17].stop()">Stop</A>
<br/>
<A HREF="examples/example19-1.xml">view smilText code</A>

<br/><br/>

<DIV id="region191">
	<smilText xml:space='default'>
	
	This text has xml:space=default. As you can       see     
	it 				is well formated
	!
	</smilText>
</DIV>
<A HREF="javascript:docs[18].play()">Play</A>
<A HREF="javascript:docs[18].pause()">Pause</A>
<A HREF="javascript:docs[18].stop()">Stop</A>
<br/>
<A HREF="examples/example19-2.xml">view smilText code</A>

</td>

<td valign="top" width="33%">

<H2>smilText Examples: TextMotion Module</H2>

<!-- smilText tag inside the html file -->
<H3>Example 20: textMode = crawl</H3>
<DIV id="region20" style="background-color:red;width:500">
	<smilText textMode="crawl" textBackgroundColor="yellow">
	smilText can crawl text! Check it out!!!
	<div>
	Hi
	<p textBackgroundColor="green">
	Hello
	<br/>
	<span textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[19].play()">Play</A>
<A HREF="javascript:docs[19].pause()">Pause</A>
<A HREF="javascript:docs[19].stop()">Stop</A>
<br/>
<A HREF="examples/example20.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 21: textMode = scroll</H3>
<DIV id="region21" style="background-color:red;width:500">
	<smilText textMode="scroll" textBackgroundColor="yellow" width="200">
	smilText can scroll text! Check it out!!!
	<div>
	Hi
	<p textBackgroundColor="green">
	Hello
	<br/>
	<span textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[20].play()">Play</A>
<A HREF="javascript:docs[20].pause()">Pause</A>
<A HREF="javascript:docs[20].stop()">Stop</A>
<br/>
<A HREF="examples/example21.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 22: textMode = jump</H3>
<H4 style='color:red'>Note: TODO</H4>
<DIV id="region22" style="background-color:red;width:500;height:100">
	<smilText textMode="jump" textBackgroundColor="yellow" width="200">
	smilText can jump text! Check it out!!!
	<div textFontSize="8">
	Hi
	<p textFontSize="16" textBackgroundColor="green">
	Hello
	<br/>
	<span textFontSize="20" textBackgroundColor="cyan">
	World!
	</span>
	</p>
	</div>
	<tev next="3s"></tev>
	Doei!
	</smilText>
</DIV>
<A HREF="javascript:docs[21].play()">Play</A>
<A HREF="javascript:docs[21].pause()">Pause</A>
<A HREF="javascript:docs[21].stop()">Stop</A>
<br/>
<A HREF="examples/example22.xml">view smilText code</A>

<!-- smilText tag inside the html file -->
<H3>Example 23: textRate attribute</H3>

<H4>Crawl mode</H4>
<DIV id="region230" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="1" textMode="crawl" textBackgroundColor="yellow">
	textRate = 1px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[22].play()">Play</A>
<A HREF="javascript:docs[22].pause()">Pause</A>
<A HREF="javascript:docs[22].stop()">Stop</A>
<br/>
<A HREF="examples/example23-0.xml">view smilText code</A>

<DIV id="region23" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="10px" textMode="crawl" textBackgroundColor="yellow" width="200">
	textRate = 10px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[23].play()">Play</A>
<A HREF="javascript:docs[23].pause()">Pause</A>
<A HREF="javascript:docs[23].stop()">Stop</A>
<br/>
<A HREF="examples/example23-1.xml">view smilText code</A>

<DIV id="region231" style="background-color:red;width:200">
	<smilText textAlign="right" textRate="100" textMode="crawl" textBackgroundColor="yellow" width="200">
	textRate = 100px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[24].play()">Play</A>
<A HREF="javascript:docs[24].pause()">Pause</A>
<A HREF="javascript:docs[24].stop()">Stop</A>
<br/>
<A HREF="examples/example23-2.xml">view smilText code</A>

<H4>Scroll mode</H4>
<DIV id="region232" style="background-color:red;width:200">
	<smilText textRate="1" textMode="scroll" textBackgroundColor="yellow" width="200">
	textRate = 1px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[25].play()">Play</A>
<A HREF="javascript:docs[25].pause()">Pause</A>
<A HREF="javascript:docs[25].stop()">Stop</A>
<br/>
<A HREF="examples/example23-3.xml">view smilText code</A>

<DIV id="region233" style="background-color:red;width:200">
	<smilText textRate="5px" textMode="scroll" textBackgroundColor="yellow" width="200">
	textRate = 5px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[26].play()">Play</A>
<A HREF="javascript:docs[26].pause()">Pause</A>
<A HREF="javascript:docs[26].stop()">Stop</A>
<br/>
<A HREF="examples/example23-4.xml">view smilText code</A>

<DIV id="region234" style="background-color:red;width:200">
	<smilText textRate="10" textMode="scroll" textBackgroundColor="yellow">
	textRate = 10px/s
	</smilText>
</DIV>
<A HREF="javascript:docs[27].play()">Play</A>
<A HREF="javascript:docs[27].pause()">Pause</A>
<A HREF="javascript:docs[27].stop()">Stop</A>
<br/>
<A HREF="examples/example23-5.xml">view smilText code</A>

<H4>Jump mode</H4>
<H4 style='color:red'>Note: TODO</H4>
<DIV id="region235" style="background-color:red;width:500;height:20">
</DIV>

<!-- smilText tag inside the html file -->
<H3>Example 24: textConceal attribute</H3>
<H4 style='color:red'>Note: TODO</H4>
<DIV id="region24" style="background-color:red;width:500;height:20">
</DIV>

</td>
</tr>
</table>

<script>
var docs = cwi.smilText.Parser.parseHTML();
for (i = 0; i < docs.length; i++) {
	docs[i].play();
}
</script>

</BODY>
</HTML>